<template>
    <div class="categorize-page">
        <div class="header">
            <router-link tag="div" to="/home" class="arrow-left">
                <img src="../assets/images/back_b_icon.png" alt="">
            </router-link>
            <div class="title">菜谱分类</div>
            <router-link tag="div" to="/search" style="width:20px;margin-right:15px"><img src="../assets/images/ic_search.png" alt=""></router-link>
        </div>     
        <div class="content">
            <div class="left" ref="left">
                <ul class="leftlists">
                    <li :class="['item',{'active':currentIndex==index}]" v-for="(item,index) in navLists" :key="index" @click="selectItem(index, $event)">{{item}}</li>
                </ul>
            </div>
            <div class="right" ref="right">
                <ul class="rightlist">
                    <li class="item">
                        <div class="item-content">
                            <div class="item-lists">
                                <div class="toptitle">推荐菜谱</div>
                                <router-link tag="div" :to="'/cooklist?id=0&type=video_recipe'" class="video-box1">
                                    <div class="txt">
                                        <span>视频菜谱</span>
                                    </div>
                                    <div class="img">
                                        <img src="../assets/images/视频.png" alt="">
                                    </div>
                                </router-link>
                                <router-link tag="div" :to="'/cooklist?id=0&type=hotest'" class="video-box2">
                                    <div class="txt">
                                        <span>热门菜谱</span>
                                        <span class="tips">本周最流行菜谱</span>
                                    </div>
                                    <div class="img">
                                        <img src="../assets/images/热门-线型.png" alt="">
                                    </div>
                                </router-link>
                                <router-link tag="div" :to="'/cooklist?id=0&type=latest'" class="video-box3">
                                    <div class="txt">
                                        <span>最新菜谱</span>
                                        <span class="tips">24小时实时推荐</span>
                                    </div>
                                    <div class="img">
                                        <img src="../assets/images/N.png" alt="">
                                    </div>
                                </router-link>
                            </div>
                        </div>
                    </li>
                    <li class="item" v-for="(item,index) in rightList" :key="index">
                        <div class="item-content">
                            <div class="item-lists">
                                <div class="toptitle">{{item.name}}</div>
                                <div class="box">
                                    <router-link tag="div" :to="'/cooklist?id='+k.id" class="box-item" v-for="k in item.list" :key="k.id">
                                        <img :src="'https://pic.ecook.cn/web/'+ k.icon+'.jpg!wl280'" alt=""  v-lazy="'https://pic.ecook.cn/web/'+ k.icon+'.jpg!wl280'">
                                        <span>{{k.name}}</span>
                                    </router-link>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <van-loading size="24px" class="loading" v-if="!showTabs" type="spinner">正在拼命加载中...</van-loading>
    </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import { getRecipeHomeData } from "../api/categorize";
    export default {
        data() {
            return {
                navLists: ['推荐菜谱','热门分类','一日三餐','时令美食','烘焙甜品','主食小吃','美容养生','食材','家常菜谱','孕婴食谱','场景','奇趣发现'],
                listsHeight:[],
                scrollY:0,
                showTabs:false,
                rightList:null,
            };
        },
        methods: {
            // 第三方库初始化
                _initScroll() {
                  // 左侧滚动效果
                  this.lefts = new BScroll(this.$refs.left, {
                    click: true, //允许触发效果
                    probeType: 3, //任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
                  });
                  // 右侧滚动效果
                  this.rights = new BScroll(this.$refs.right, {
                    scrollY: true,
                    click: true, //允许触发效果
                    probeType: 3, //任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
                  });
                  // 获取右侧滚动条，获取滚动高度
                  this.rights.on("scroll", (pos) => {
                    this.scrollY = Math.abs(Math.round(pos.y)); //当前高度
                  });
                },
                //左侧点击事件
                selectItem(index,event){
                    this.lefts.refresh()
                    this.rights.refresh()
                    if (!event._constructed) {
                        // 原生点击效果不执行
                        return
                    }else{
                        // 获取右侧所有对象
                        let rightItems = this.$refs.right.getElementsByClassName("item");
                        let el = rightItems[index];//获取点击左侧同个位置右侧滑动对象
                        this.rights.scrollToElement(el,500) //滑动方法
                    }
                },
                //获取右侧每一个li高度
                _getHeight(){
                    let rightItems = this.$refs.right.getElementsByClassName("item");
                    let height = 0;
                    this.listsHeight.push(height);

                    for (let i = 0; i < rightItems.length; i++) {
                        let item = rightItems[i]//获取对象
                        height += item.clientHeight;
                        this.listsHeight.push(height)
                    }
                },
                change(value){
                    this.showTabs = value
                },
                select(){
                    this.showTabs = false
                },
                //获取分类数据
                getRecipeHomeFun(){
                    getRecipeHomeData().then(data=>{
                        console.log(data);
                        if (data.list) {
                            setTimeout(() => {
                            this.showTabs = true
                            this.lefts.refresh()
                            this.rights.refresh()
                        }, 500);
                        }else{
                            setTimeout(() => {
                            this.$toast("加载失败")
                            this.$router.push("/home")
                        }, 500);
                        }  
                        this.rightList = data.list
                    })
                }

        },
        mounted() {
             this.$nextTick(()=>{
                setTimeout(() => {
                    this._initScroll();
                    this._getHeight()
                }, 500);
            });
          
        },
        created() {
            this.getRecipeHomeFun()
        },
        computed:{
            currentIndex(){
                for (let i = 0; i < this.listsHeight.length; i++) {
                    let height = this.listsHeight[i]
                    let height2 = this.listsHeight[i+1]

                    // 判断高度是否在两个值之间
                    if (!height2 || (this.scrollY >=height && this.scrollY < height2)) {
                        // 控制左侧按钮滑动
                        let leftItems = this.$refs.left.getElementsByClassName("item");
                         
                        this.lefts.scrollToElement(leftItems[i],500) //滑动方法
                        return i;
                    }
                    
                }
                return 0;
            }
        },
        // watch:{
        //     rightList(){
        //         this.$nextTick(()=>{
        //             this.lefts.refresh()
        //             this.rights.refresh()
        //         })
        //     }
        // }
    }
</script>

<style lang="less" scoped>
.categorize-page{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .header{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 0.5px solid #ccc;
        .arrow-left{

            &>img{
                height: 20px;
                width: 13px;
                margin-left: 15px;
            }
        }
        .title{
            font-size: 17px;
            font-weight: bold;
        }
    }
    .search{
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        .full{
            width: 88%;
            height: 34px;
            padding: 5px 15px;
            border-radius: 8px;
            box-sizing: border-box;
            background-color: #ebebeb;
            display: flex;
            align-items: center;
            justify-content: center;
            &>img{
                width: 15px;
                height: 15px;
                margin-right: 8px;
            }
            &>span{
                font-size: 13px;
                color: #999;
                font-weight: 600;
            }
        }
    }
    .content{
        position: absolute;
        left: 0;
        top: 51px;
        right: 0;
        bottom: 0px;
        margin: auto;
        background-color: #f2f2f2;
        display: flex;
        overflow: hidden;

        .left{
            flex: 0 0 100px;
            background-color: #fff;

            .leftlists{
                .item {
                    height: 40px;
                    line-height: 40px;
                    text-align: right;
                    padding-right: 15px;
                    font-size: 14px;
                    font-weight: bold;
                    position: relative;
                }
                .active{
                    background-color: #f2f2f2;
                    color: #f8b252;

                    &::before{
                        content:'';
                        height: 15px;
                        width: 3px;
                        background-color: #f8b252;
                        position: absolute;
                        left: 8px;
                        top: 0;
                        bottom: 0;
                        margin: auto 0;
                    }
                }
            }
        }
        .right{
            flex: 1;
            padding: 0 20px;
            position: relative;
            .rightlist{

                .toptitle{
                    width: 100%;
                    height: 40px;
                    line-height: 40px;
                    font-size: 14px;
                    font-weight: bold;
                    padding-bottom: 5px;
                }
                .item {
                    width: 100%;
                    padding-bottom: 15px;

                    .item-content{
                     
                        .item-lists{
              
                            .video-box3,
                            .video-box2,
                            .video-box1{
                                display: flex;
                                height: 80px;
                                width: 100%;
                                background-color: #3d8cd7;
                                border-radius: 8px;
                                overflow: hidden;
                                padding: 20px 13px 7px 10px;
                                box-sizing: border-box;
                                margin-bottom: 15px;
                                .txt{
                                    flex: 38%;
                                    height: 100%;
                                    &>span{
                                        display: block;
                                        font-size: 17px;
                                        color: #fff;
                                        font-weight: bold;
                                    }
                                    .tips{
                                        font-size: 14px;
                                        margin-top: 10px;
                                    }
                                }
                                .img{
                                    flex: 1;
                                    display: flex;
                                    justify-content: flex-end;
                                    align-items: flex-end;
                                    height: 100%;
                                    &>img{
                                        width: 30px;
                                        height: 30px;

                                    }
                                }
                            }
                            .video-box3,
                            .video-box2{
                                background-color: #fff;
                                .txt{
                                    &>span{
                                        color: #000;
                                    }
                                    .tips{
                                        color: #777777;
                                    }
                                }
                                .img{
                                    &>img{
                                        margin-bottom: 12px;
                                    }
                                }
                            }

                            .box{
                                width: 100%;
                                padding: 15px 0px;
                                background-color: #fff;
                                border-radius: 8px;
                                box-sizing: border-box;
                                display: flex;
                                flex-wrap: wrap;
                                .box-item{
                                    width: 50%;
                                    height: 100px;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: space-evenly;
                                    align-items: center;

                                    &>img{
                                        width: 35px;
                                        height: 35px;
                                        
                                    }
                                    &>span{
                                        font-weight: bold;
                                        font-size: 15px;
                                    }
                                }
                            }
                        }
                    }
                }
                // .item:first-child{
                //     margin-top: 40px;
                // }
                
            }
        }
          .title{
                width: 100%;
                height: 40px;
                line-height: 40px;
                position: fixed;
                top: 91px;
                left: 120px;
                font-size: 14px;
                font-weight: bold;
                z-index: 99;
                background-color: #f2f2f2;
            }
    }
    .loading {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
}
</style>